<template>
    <div class="phone-login">
        <van-nav-bar title="手机短信登录" right-text="注册" left-arrow @click-left="goBack" @click-right="onClickRight"/>
        <div class="content">
            <div class="login-con">
                <div class="login-info">
                    <input type="text" v-model="phoneNo" placeholder="请输入手机号码">
                </div>
                <div class="login-info phone-code">
                    <input type="number" v-model="code" value="" placeholder="请输入短信验证码" class="msg-code">
                    <button class="codetxt" type="button" :disabled="disabled" @click="sendcode">{{btntxt}}</button>
                </div>
            </div>
            <div class="other-login">
                <router-link :to="{name: 'phoneLogin'}" tag="span">忘记密码</router-link>
                <router-link :to="{name: 'login'}" tag="span">用户名登录</router-link>
            </div>
            <div class="submit">
                <button type="submit" class="submit-btn" @click="signin">登录</button>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from "vue"
import axios from "axios"
import {
    NavBar,
    Toast
} from "vant"
import {
    login,
    getVerificationCode
} from "../../axios/api.js"
export default {
    components: {
        [NavBar.name]: NavBar,
        [Toast.name]: Toast
    },
    data() {
        return {
            phoneNo: "",
            code: "",
            type: "1",
            btntxt: "获取验证码",
            disabled: false,
            time: 0
        }
    },
    methods: {
        //返回上一页
        goBack() {
            this.$router.go(-1);
        },
        //进入注册页
        onClickRight() {
            this.$router.push("/register");
        },
         //发送手机短信验证码
        sendcode() {
            let reg = /^1(3|4|5|7|8)\d{9}$/;
            if (this.phoneNo == '') {
                this.$toast("手机号不能为空");
            } else if (!reg.test(this.phoneNo)) {
                this.$toast("手机号格式不正确");
            } else {
                this.time = 60;
                this.disabled = true;
                //验证码的时间设置
                this.timer();
                //手机号调取后端接口
                getVerificationCode().then(res => {
                    this.$toast("请注意接收验证码");
                    console.log(res.data)
                    }).catch(function(err) {
                        console.log(err);
                    });
		    }
	    },
        //验证码的倒计时
        timer() {
            if (this.time > 0) {
                this.time--;
                this.btntxt = this.time + "s后获取";
                setTimeout(this.timer, 1000);
            } else {
                this.time = 0;
                this.btntxt = "获取验证码";
                this.disabled = false;
            }
        },
        signin() {
            let userInfo = new URLSearchParams();
            userInfo.append("phoneNo",this.phoneNo);
            userInfo.append("type","1");
            login(userInfo).then(res => {
                // console.log(res.data);
                axios.defaults.headers.Authorization = "Bearer " + res.data.data.token;
                this.$store.commit("token",res.data.data.token);
                // console.log(this.$store.commit("token",res.data.data.token))
                this.$store.commit("userName",res.data.data.userName);
                //设置Vuex登录标志为true，默认isLogin为false
                //this.$store.dispatch("isLogin", true);
                // Vuex在用户刷新的时候userLogin会回到默认值false，所以我们需要用到HTML5储存
                // 我们设置一个名为Flag，值为isLogin的字段，作用是如果Flag有值且为isLogin的时候，证明用户已经登录了。
                //sessionStorage.setItem("Flag","isLogin");
                this.$router.push({name: "mine"})//this.$route.query.redirect
            }).catch(function(err){
                console.log(err)
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import "../../assets/less/variable.less";
.phone-login {
    background: #fff;
    .content {
        width: 90%;
        height: 100%;
        margin: 0 auto;
        .login-con {
            width: 100%;
            background: #fff;
            .login-info {
                width: 100%;
                box-sizing: border-box;
                line-height: 24px;
                background-color: #fff;
                color: #969799;
                font-size: 14px;
                & > input {
                    display: flex;
                    padding: 10px 15px;
                    width: 91.6%;
                    border: 0;
                    border-bottom: 1px solid #ebedf0;
                }
            }
            .phone-code {
                display: flex;
                .msg-code {
                    flex: 1;
                }
                .codetxt {
                    padding: 10px 15px;
                    border: 0;
                    background: #fff;
                    outline: none;
                }
            }
        }
        .other-login {
            display: flex;
            margin-top: 15px;
            & > span {
                flex: 1;
                display: inline-block;
                text-align: left;
                font-size: @base_textSize;
                color: @base_textColor;
            }
            span:last-child {
                text-align: right;
            }
        }
        .submit {
            margin-top: .67rem;
            width: 100%;
            background-color: #fff;
            color: #fff;
            font-size: @base_textSize;
            .submit-btn {
                padding: 10px;
                width: 100%;
                height: 1.07rem;
                border: 0;
                border-radius: 3px;
                background: #ff976a;
                outline: none;
            }
        }
    }
}
</style>